<!-- 标签页 license by http://eleadmin.com -->
<template>
  <div class="ele-admin-tabs">
    <el-tabs :value="active" @tab-click="onTabClick" @tab-remove="onTabRemove">
      <el-tab-pane name="/" :label="homeTitle"/>
      <el-tab-pane
        v-for="d in tabs"
        :key="d.key"
        :name="d.key"
        :label="d.title"
        :closable="d.closable"/>
    </el-tabs>
    <el-dropdown class="ele-admin-tabs-drop" @command="onDropClick">
      <i class="el-icon-arrow-down"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          command="fullscreen"
          :icon="bodyFullscreen ? 'el-icon-_compress' : 'el-icon-full-screen'">
          {{ bodyFullscreen ? t('ele.tabs.fullscreenExit') : t('ele.tabs.fullscreen') }}
        </el-dropdown-item>
        <el-dropdown-item command="left" icon="el-icon-back">
          {{ t('ele.tabs.closeLeft') }}
        </el-dropdown-item>
        <el-dropdown-item command="right" icon="el-icon-right">
          {{ t('ele.tabs.closeRight') }}
        </el-dropdown-item>
        <el-dropdown-item command="other" icon="el-icon-close">
          {{ t('ele.tabs.closeOther') }}
        </el-dropdown-item>
        <el-dropdown-item command="all" icon="el-icon-circle-close">
          {{ t('ele.tabs.closeAll') }}
        </el-dropdown-item>
        <el-dropdown-item v-if="showRefresh" command="reload" icon="el-icon-refresh-right">
          {{ t('ele.tabs.reload') }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import Locale from 'element-ui/lib/mixins/locale';

export default {
  name: 'MyTabs',
  mixins: [Locale],
  emits: [
    'tab-add',
    'tab-remove',
    'tab-remove-all',
    'tab-remove-left',
    'tab-remove-right',
    'tab-remove-other',
    'reload-page',
    'fullscreen-body'
  ],
  props: {
    // 主页标题
    homeTitle: String,
    // 标签页数据
    tabs: Array,
    // 页签选中
    active: String,
    // 右侧下拉是否显示刷新按钮
    showRefresh: Boolean,
    // 是否再次点击选中tab刷新
    clickReload: Boolean,
    // 内容区域是否全屏
    bodyFullscreen: Boolean
  },
  methods: {
    /* 处理tab点击 */
    onTabClick(obj) {
      if (this.active === obj.name) {
        if (this.clickReload) {
          this.reloadPage();
        }
        return;
      }
      let tab;
      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].key === obj.name) {
          tab = this.tabs[i];
          break;
        }
      }
      this.$router.push(tab ? tab.fullPath : obj.name);
    },
    /* 处理tab删除 */
    onTabRemove(name) {
      this.$emit('tab-remove', {name: name, active: this.active});
    },
    /* 下拉菜单点击 */
    onDropClick(command) {
      if (command === 'left') {  // 关闭左侧
        this.$emit('tab-remove-left', this.active);
      } else if (command === 'right') {  // 关闭右侧
        if (this.active === '/') {
          this.removeAllTab();
        } else {
          this.$emit('tab-remove-right', this.active);
        }
      } else if (command === 'other') {  // 关闭其他
        this.$emit('tab-remove-other', this.active);
      } else if (command === 'all') {  // 关闭全部
        this.removeAllTab();
      } else if (command === 'reload') {  // 刷新当前
        this.reloadPage();
      } else if (command === 'fullscreen') {  // 内容全屏
        this.$emit('fullscreen-body', !this.bodyFullscreen);
      }
    },
    /* 关闭全部Tab */
    removeAllTab() {
      this.$emit('tab-remove-all');
    },
    /* 刷新页面 */
    reloadPage() {
      this.$emit('reload-page');
    }
  }
}
</script>
